<template>
  <div class="red-package-rain" ref="rain">
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import RedPackage from "@/api/redpackage.js";
const props=defineProps({
  speed:{
    type:Number,
    default:200
  },
  duration:{
    type:Number,
    default:5000
  },
  downDuration:{
    type:Number,
    default:2000
  }
})
const $emit=defineEmits(["onClickRedPackage","onFinishRain","onStartRain"])
const rain=ref()

function onClickRedPackage(){
  $emit("onClickRedPackage")
}
const createRedPackage=()=>{

  $emit("onStartRain")
  const timer=setInterval(()=>{
     RedPackage.create({parent:rain.value,onClickRedPackage:onClickRedPackage,duration:props.downDuration})
  },props.speed)

  setTimeout(()=>{
    clearInterval(timer)
    $emit('onFinishRain')
  },props.duration)
}




onMounted(()=>{
  createRedPackage()
})
</script>

<script>
export default {
  name: "RedPackageRain"
}
</script>


<style scoped>
  .red-package-rain{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    background-color: orange;
  }
</style>